<template>
	<view class="book-card">
		<block v-if="type=='nav-card' || type=='card'">
			<view class="card" v-if="name">
				<view class="container">
					<view :style="{width:w+'rpx',height:h+'rpx'}" class="imgbox" @click="to">

						<image :src="imgExchange" class="img" :style="{width:w+'rpx',height:h+'rpx'}">
						</image>

						<text class="badge text-center" v-if="sourceSite != ''">
							{{ sourceSite }}
						</text>

					</view>

					<view class="content">
						<view class="title" @click="to">
							<rich-text :nodes="name" v-if="isRich" class="text-size text"></rich-text>
							<text class="text" v-else>{{ name }}</text>
						</view>
						<view class="author">
							<uni-icons type="auth" size="15" style="margin-right: 10rpx;"></uni-icons>
							<rich-text :nodes="author" v-if="isRich" class="text-size text"></rich-text>
							<text class="text-size text" v-else>{{ author }}</text>
						</view>
						<view class="tags" v-if="tags">
							<block v-for="(item,index) in tags" :key="index">
								<view class="text-center">
									<text class="tag-item"
										:style="{color:colors[index],border: colors[index]+' solid 2rpx'}">
										{{item}}
									</text>
									<!-- <uni-tag :text="item" :inverted="true" type="primary"></uni-tag> -->
								</view>
							</block>
						</view>
					</view>
				</view>

				<view class="ext">
					<rich-text :nodes="synopsis" v-if="isRich && hasRich(synopsis)"></rich-text>
					<ex-text :title="synopsis" v-else></ex-text>
				</view>

				<view v-if="type=='nav-card'">
					<uni-goods-nav :fill="true" :options="formatOptions" :buttonGroup="buttonGroup" @click="leftClick"
						@buttonClick="read" />
				</view>

			</view>
		</block>

		<block v-if="type=='list'">

			<view class="container" v-if="name">
				<view :style="{width:w+'rpx',height:h+'rpx'}" class="imgbox" @click="to">

					<image :src="imgExchange" class="img" :style="{width:w+'rpx',height:h+'rpx'}">
					</image>

					<text class="badge text-center" v-if="sourceSite != ''">
						{{ sourceSite }}
					</text>

				</view>

				<view class="content">
					<view class="title" @click="to">
						<rich-text :nodes="name" v-if="isRich" class="text-size text"></rich-text>
						<text class="text" v-else>{{ name }}</text>
					</view>

					<view class="desc">
						<rich-text :nodes="synopsis" v-if="isRich" class="text-size text"></rich-text>
						<text class="text-size text" v-else>{{ synopsis }}</text>
					</view>

					<view class="author">
						<uni-icons type="auth" size="15" style="margin-right: 10rpx;"></uni-icons>
						<rich-text :nodes="author" v-if="isRich" class="text-size text"></rich-text>
						<text class="text-size text" v-else>{{ author }}</text>
					</view>

					<view class="tags" v-if="tags">
						<block v-for="(item,index) in tags" :key="index">
							<view class="text-center">
								<text class="tag-item"
									:style="{color:colors[index],border: colors[index]+' solid 2rpx'}">
									{{item}}
								</text>
							</view>
						</block>
					</view>
				</view>
			</view>


		</block>
	</view>
</template>

<script>
	import utils from '@/static/js/utils.js'
	export default {
		name: "book-card",
		data() {
			return {
				options: [{
					icon: 'hand-up',
					text: '点赞'
				}, {
					icon: 'star',
					text: '收藏',
				}, {
					icon: 'fire',
					text: '点击',
					// info: 2
				}],
				buttonGroup: [{
					text: '立即阅读',
					backgroundColor: '#ffa200',
					color: '#fff'
				}],
				colors: [
					"#66CCCC", "#FF99CC", "#FF9999",
					"#FFFFFF", "#FFCC99", "#FFFF99",
					"#FF6666", "#FFFF66", "#99CC66",
					"#FF6600", "#FF9933", "#009966"
				]
			};
		},
		props: {
			clickNum: {
				type: Number,
				default: 100
			},
			collectionNum: {
				type: Number,
				default: 1000
			},

			likesNum: {
				type: Number,
				default: 10000
			},

			// 是否为链接
			isLink: {
				type: Boolean,
				default: false
			},
			// 书名
			name: {
				type: String,
				default: ""
			},
			// 图片
			img: {
				type: String,
				default: ""
			},
			// 作者
			author: {
				type: String,
				default: ""
			},
			// 标签
			tags: Array,
			// 字体
			size: {
				type: Number,
				default: 30
			},
			// 书源
			sourceSite: {
				type: String,
				default: ""
			},
			// 高
			h: {
				type: Number,
				default: 200
			},
			// 宽
			w: {
				type: Number,
				default: 150
			},
			// 链接
			link: {
				type: String,
				default: ""
			},
			
			// id
			cardId: Number,
			
			
			// 简介
			synopsis: {
				type: String,
				default: ""
			},
			isRich: {
				default: false,
				type: Boolean
			},

			type: {
				default: "nav-card",
				type: String
			}
		},
		computed: {
			imgExchange() {
				return utils.imgExchange(this.img)
			},
			formatOptions() {
				this.options[0].text = utils.formatNumber(this.likesNum)
				this.options[1].text = utils.formatNumber(this.collectionNum)
				this.options[2].text = utils.formatNumber(this.clickNum)
				return this.options
			}
		},
		methods: {
			hasRich(text) {
				if (text) {
					return text.indexOf("<span") > -1
				}
				return false
			},
			// 立即阅读
			read(e) {
				console.log(e)
				this.$emit("read", this.cardId)
			},
			// 点赞 收藏 转发
			leftClick(e) {
				console.log(e)
			},
			to() {
				if (this.isLink) {
					uni.navigateTo({
						url: this.link
					})
				}
			}
		},
		onLoad() {

		}
	}
</script>

<style scoped>
	.book-card {
		width: 100%;
	}
	.book-card .card {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.book-card .ext {
		margin: 10px 0;
	}

	.book-card .btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.book-card .button {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.book-card .container {
		width: 100%;
		display: flex;
		flex-direction: row;
	}

	.book-card .imgbox {
		flex-shrink: 0;
		margin-right: 30rpx;
		position: relative;
	}

	.book-card .img {
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
		border-radius: 5px;
	}


	.book-card .badge {
		background-color: red;
		color: white;
		position: absolute;
		top: 20rpx;
		left: 0rpx;
		font-size: 25rpx;
		padding: 4rpx 10rpx;
		height: 32rpx;
		opacity: 0.6;
		border-bottom-right-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}


	.book-card .content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.book-card .title {
		flex: 2;
		font-weight: 550;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.book-card .author {
		flex: 2;
		color: #C0C0C0;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.book-card .tags {
		flex: 2;
		display: flex;
		flex-direction: row;
	}

	.book-card .tag-item {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 3rpx 6rpx;
		border-radius: 6rpx;
		font-size: 26rpx;
		margin-right: 20rpx;
	}

	.book-card .text-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.book-card .text-size {
		font-size: 30rpx;
	}

	.book-card .text {
		text-overflow: clip;
		max-lines: 1;
		overflow: hidden;
		lines: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.book-card .desc {
		flex: 2;
		color: #C0C0C0;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>
